<template>
  <div class="homeConfigurationOuter">
    <!-- 面包屑导航 -->
    <div class="homeConfigurationTop">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/layout/portal' }">背景图</el-breadcrumb-item>
        <el-breadcrumb-item>网页配置</el-breadcrumb-item>
        <el-breadcrumb-item>背景图配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 标题 -->
    <h3 class="title">背景图配置</h3>

    <!-- 内容区 -->
    <div class="homeConfiguration">
      <!-- 背景图 -->
      <el-row class="backImg">
        <ImageUpload title="首页背景" />
        <ImageUpload title="归档背景" />
        <ImageUpload title="分类背景" />
        <ImageUpload title="标签背景" />
        <ImageUpload title="关于背景" />
        <ImageUpload title="用户头像" />
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import ImageUpload from "../../components/ImageUpload.vue";
</script>

<style lang="scss" scoped>
$H: 91vh;

.homeConfigurationOuter {
  width: 100%;
  height: $H;
  background-color: rgb(243, 243, 243);
  padding: 20px;

  .homeConfigurationTop {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 10px 10px;
    border-radius: 10px;
  }

  .title {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .homeConfiguration {
    background-color: #fff;
    padding: 10px 0 0 10px;
    border-radius: 10px;
    min-height: 60%;
    max-height: 86%;

    &>.el-row {
      &:not(:last-child & :first-child) {
        margin: 20px 0;
      }
    }

    .backImg {
      font-size: 18px;
      font-family: "楷体";
      font-weight: bold;

      .el-row {
        &:last-child {
          margin-top: 20px;
        }
      }

      .bgTitle {
        margin-bottom: 20px;
      }
    }
  }
}
</style>
